<!DOCTYPE html>
<html lang="en">
  <head>
    <!--

    Shows how a Carousel's arrows and dots can be set to a plain button —
    not because this is particularly useful, but to show it can be done.

    -->

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Carousel with plain buttons for arrows and dots</title>

    <link rel="stylesheet" href="../demos.css" />
    <script type="module" src="../../define/Carousel.js"></script>

    <style>
      html {
        height: 100%;
      }

      body {
        background: black;
        height: 100%;
        padding: 0;
      }

      img {
        display: inline-block;
        height: 100%;
        object-fit: contain;
        vertical-align: middle;
        width: 100%;
      }
    </style>
  </head>

  <body role="main">
    <div class="demo fullScreen">
      <style>
        elix-carousel {
          background: black;
          flex: 1;
          max-height: 100%;
        }

        elix-carousel img {
          display: inline-block;
          height: 100%;
          vertical-align: middle;
          width: 100%;
        }
      </style>
      <!-- Create a carousel with plain buttons for the arrows and dots -->
      <elix-carousel
        aria-label="Nature scenes"
        arrow-button-part-type="button"
        proxy-part-type="button"
      >
        <img src="../images/image01.jpg" alt="Mountain lake" />
        <img src="../images/image02.jpg" alt="Terraced farm" />
        <img src="../images/image03.jpg" alt="Winter trees" />
        <img src="../images/image04.jpg" alt="Forest river" />
        <img src="../images/image05.jpg" alt="Red panda" />
      </elix-carousel>
    </div>
  </body>
</html>
